import './Scss/PersonnelPost.scss'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { useState, useRef, useEffect } from 'react'
import { Column } from '@ant-design/plots'
import dayjs from 'dayjs'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'

export const PersonnelPost001 = () => {
    const { run: geyPersonStatPersonTypeStatAttendance } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let list = []
            res.list.forEach(({ tableName, personCount, attendanceCount }) => {
                list = [...list, { name: '进场人数', type: tableName, value: personCount }]
            })
            setData(list)
        },
    })

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        geyPersonStatPersonTypeStatAttendance({
            url: `getPersonStatPersonTypeStatAttendance`,
            data: { date: dayjs().format('YYYY-MM-DD') },
        })
    }, [geyPersonStatPersonTypeStatAttendance])

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    return (
        <div className="PersonnelPost001" ref={ChartsBox}>
            {Charts && (
                <Column
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', () => {
                            setParameter({
                                uuid: '',
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplateNew',
                            })
                            setTrue()
                        })
                    }
                />
            )}

            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="岗位统计明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const PersonnelPost002 = ({ type }) => {
    const { run: geyPersonStatPersonTypeStatAttendance } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list
                .map(({ uuid, tableName, personCount, attendanceCount }) => {
                    if (type) {
                        return [
                            { name: '进场人数', type: tableName, value: personCount, uuid },
                            { name: '出勤人数', type: tableName, value: attendanceCount, uuid },
                        ]
                    } else {
                        return [{ name: '进场人数', type: tableName, value: personCount, uuid }]
                    }
                })
                .flatMap(item => item)
            setData(data)
        },
    })

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        geyPersonStatPersonTypeStatAttendance({
            url: `getPersonStatPersonTypeStatAttendance`,
            data: { date: dayjs().format('YYYY-MM-DD') },
        })
    }, [geyPersonStatPersonTypeStatAttendance])

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    return (
        <div className="PersonnelPost001" ref={ChartsBox}>
            {Charts && (
                <Column
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setParameter({
                                other: { type: data.uuid },
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        })
                    }
                />
            )}

            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="岗位统计明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
